<template>
	<el-main id="s">
		<div id="div-main">
			<div v-show="subject_bool">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label=" "></el-tab-pane>
					<el-tab-pane label="  "></el-tab-pane>
					<el-tab-pane></el-tab-pane>
					<el-tab-pane label="账号登录" name="first"></el-tab-pane>
					<el-tab-pane label="人脸登录" name="second"></el-tab-pane>
				</el-tabs>
				<el-form ref="form" :model="form" label-width="80px" v-show="hose">
					<br><br>
					<el-form-item label="账号:" >
						<el-col :span="20">
							<el-input prefix-icon="el-icon-s-custom" v-model="input" placeholder="请输入手机号"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="密码:">
						<el-col :span="20">
							<el-input prefix-icon="el-icon-s-goods" v-model="pass" placeholder="请输入密码" show-password></el-input>
						</el-col>
					</el-form-item>
					<el-checkbox v-model="checked" id="cher">自动登录</el-checkbox>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 15px;">还没有账号？ <el-link
						 type="danger" @click="Register">前去注册</el-link></span>
					<br><br>
					<el-button type="primary" id="but" @click="onSubmit">登录</el-button>
					<el-divider>第三方登录</el-divider>
					<a href="" class="form-img"><img id="QQ1" src="../../../images/login/qq (1).png" width="25px"><span style="font-size: 15px;">QQ</span></a>
					<a href="" class="form-img"><img id="QQ1" src="../../../images/login/微信.png" width="30px"><span style="font-size: 15px;">微信</span></a>
				</el-form>
				<div v-show="hose?false:true">
					<video id="videoCamera" width="300px" height="300px" autoplay="autoplay"></video>
					<canvas id="canvasCamera" width="600px" height="600px" style="display: none;"></canvas>
					<div id="errors">
						{{error}}
					</div>
					<br>
					<!-- <el-button id="snap" @click="handleUpdata">拍照</el-button> -->
				</div>
			</div>
			<el-form ref="form" :model="form" label-width="80px" v-show="subject_bool?false:true">
				<el-page-header @back="goBack" id="goBack"></el-page-header>
				<br>
				<el-form-item label="手机号:">
					<el-col :span="20">
						<el-input type="text" prefix-icon="el-icon-phone" placeholder="请输入手机号" v-model="pathon" maxlength="11"
						 show-word-limit></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="验证码:">
					<el-col :span="10">
						<el-input type="text" placeholder="请输入验证码" v-model="verify"></el-input>
					</el-col>
					&nbsp;&nbsp;
					<el-button @click="reciprocal" id="recbut" :disabled="isDisable">{{date}}</el-button>
				</el-form-item>
				<el-form-item label="昵称:">
					<el-col :span="20">
						<el-input type="text" prefix-icon="el-icon-s-custom" placeholder="请输入手机号" v-model="name"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="密码:">
					<el-col :span="20">
						<el-input prefix-icon="el-icon-s-goods" v-model="pass" placeholder="请输入" show-password></el-input>
					</el-col>
				</el-form-item>
				<br>
				<el-button type="primary" id="but" @click="onSubmit">注册</el-button>
			</el-form>

		</div>

	</el-main>
</template>

<script>
	export default {
		data() {
			return {
				input: '',
				pass: '',
				activeName: 'first',
				checked: false,
				hose: true,
				dialogTableVisible: false,
				videoWidth: 500,
				videoHeight: 400,
				imgSrc: '',
				thisCancas: null,
				thisContext: null,
				thisVideo: null,
				ImgFile: '', //返回的图片文件
				error: '请正视屏幕',
				typebool: false,
				pathon: '',
				verify: '',
				date: '获取验证码',
				dd: 60,
				isDisable: false,
				name: '',
				subject_bool: true,
			};
		},
		methods: {
			goBack() {
				this.subject_bool = true
			},
			Register() {
				this.subject_bool = false
			},
			reciprocal() {
				let self = this;

				setInterval(function() {
					if (self.dd > 0) {
						self.isDisable = true;
						this.si = setTimeout(function() {
							self.date = self.dd - 1;
							self.dd--;
						}, 0);
					} else {
						self.isDisable = false;
						self.date = '获取验证码';
					}
				}, 1000);
			},
			handleClick(tab, event) {
				var type = this.activeName;
				if (type == 'second') {
					this.hose = false;
					this.typebool = true;
					var _this = this;
					this.thisCancas = document.getElementById('canvasCamera');
					this.thisContext = this.thisCancas.getContext('2d');
					this.thisVideo = document.getElementById('videoCamera');
					// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
					if (navigator.mediaDevices === undefined) {
						navigator.mediaDevices = {}
					}
					// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
					// 使用getUserMedia，因为它会覆盖现有的属性。
					// 这里，如果缺少getUserMedia属性，就添加它。
					if (navigator.mediaDevices.getUserMedia === undefined) {
						navigator.mediaDevices.getUserMedia = function(constraints) {
							// 首先获取现存的getUserMedia(如果存在)
							var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
							// 有些浏览器不支持，会返回错误信息
							// 保持接口一致
							if (!getUserMedia) {
								return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
							}
							// 否则，使用Promise将调用包装到旧的navigator.getUserMedia
							return new Promise(function(resolve, reject) {
								getUserMedia.call(navigator, constraints, resolve, reject)
							})
						}
					}

					var constraints = {
						audio: false,
						video: {
							width: this.videoWidth,
							height: this.videoHeight,
							transform: 'scaleX(-1)'
						}
					};
					navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
						// 旧的浏览器可能没有srcObject
						if ('srcObject' in _this.thisVideo) {
							_this.thisVideo.srcObject = stream
						} else {
							// 避免在新的浏览器中使用它，因为它正在被弃用。
							_this.thisVideo.src = window.URL.createObjectURL(stream)
						}
						_this.thisVideo.onloadedmetadata = function(e) {
							_this.thisVideo.play()
						}
					}).catch(err => {
						console.log(err)
					})
					setInterval(this.typetime, 2000);
				} else {
					this.typebool = false;
					this.thisVideo.srcObject.getTracks()[0].stop()
					this.hose = true;
					setInterval(this.typetime, 2000);
				}
			},
			typetime() {
				if (this.typebool) {
					setTimeout(this.handleUpdata, 2000);
				}
			},
			handleUpdata() {
				this.setImage();
				if (this.imgSrc !== '') {
					let file = this.imgSrc; // 把整个base64给file
					let type = "image/jpeg"; // 定义图片类型（canvas转的图片一般都是png，也可以指定其他类型）
					let time = (new Date()).valueOf(); //生成时间戳
					let name = time + ".jpg"; // 定义文件名字（例如：abc.png ， cover.png）
					let conversions = this.dataURLtoFile(file, name); // 调用base64转图片方法
					let params = new URLSearchParams();
					params.append('file', file);

					this.$axios.post('http://localhost:8080/fase', params)
						.then(res => {
							if (res.data.error != "0") {
								this.error = res.data.errors;
							} else if (res.data.bool == true) {
								this.error = "用户ID：" + res.data.user_id + ";用户昵称：" + res.data.user_info;
							}
						}).catch(res => {
							alert(res.data.error)
						});
				}
			},
			setImage() {
				var _this = this
				// 点击，canvas画图
				_this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)
				// 获取图片base64链接
				var image = this.thisCancas.toDataURL('image/png')
				_this.imgSrc = image
				this.$emit('refreshDataList', this.imgSrc)
			},
			dataURLtoFile(dataurl, filename) {

				var arr = dataurl.split(',')
				var mime = arr[0].match(/:(.*?);/)[1]
				var bstr = atob(arr[1])
				var n = bstr.length

				var u8arr = new Uint8Array(n)
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n)
				}
				return new File([u8arr], filename, {
					type: mime
				})
			}
		}
	}
</script>
<style scoped>
	a {
		text-decoration: none;
	}

	#recbut {
		width: 113px;
	}

	#div-main {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding-top: 30px;
		padding-bottom: 30px;
		width: 380px;
	}

	#but {
		margin-left: 40%;
	}

	#cher {
		margin-left: 12%;
	}

	.form-img {
		margin-left: 90px;
	}

	#videoCamera {
		margin-left: 11%;
	}

	#errors {
		color: red;
		width: 100px;
		margin: 0 auto;
	}

	#goBack {
		margin-left: 22px;
	}
</style>
